<template>
  <div style="padding: 20px">
    <el-button type="primary" size="small"  @click="add">
      注册服务
    </el-button>
    <el-table
      stripe
      border
      :data="namespaceData"
      style="width: 100%;margin-top: 15px"
      ref = 'namespaceTable'
      @selection-change="handlerSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="序号">
        <template v-slot="scope">
          <span>{{(pageParams.pageNum - 1) * pageParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="namespace"
        label="命名空间ID">
      </el-table-column>
      <el-table-column
        prop="namespaceShowName"
        label="命名空间名称">
      </el-table-column>
      <el-table-column
        prop="quota"
        label="配额">
      </el-table-column>
      <el-table-column
        prop="configCount"
        label="配置数量">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="namespaceDesc"
        label="描述">
      </el-table-column>
      <el-table-column
        prop="options"
        label="操作"
        width="150">
        <template v-slot="scope">
          <el-button
            size="mini"
            :disabled='scope.row.namespaceShowName==="public"'
            @click="deleteOne(scope.$index,scope.row)">
            删除
          </el-button>
          <el-button
            size="mini"
            type="danger"
            :disabled='scope.row.namespaceShowName==="public"'
            @click="change(scope.$index,scope.row)">
            修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination" style="margin-top:20px;text-align:center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,prev, sizes, pager, next,jumper"
        :current-page.sync="pageParams.pageNum"
        :page-size="pageParams.pageSize"
        :page-sizes="[10,20,50,100]"
        :total="namespaceData.length">
      </el-pagination>
    </div>
    <el-button size="small" style="margin-top: 10px"
               type="primary"
               @click = "deleteMany"
               :disabled="this.selectItems.length===0">
      批量删除
    </el-button>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form :model="namespaceForm" ref="namespaceForm" label-width="120px" :rules="rules">
        <el-form-item label="命名空间ID" prop="namespace">
          <el-input v-model="namespaceForm.namespace" placeholder="不填自动生成" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="命名空间名" prop="namespaceShowName">
          <el-input v-model="namespaceForm.namespaceShowName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="命名空间描述" prop="namespaceDesc">
          <el-input v-model="namespaceForm.namespaceDesc" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "discovery"
}
</script>

<style scoped>

</style>
